<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性选择器</title>
  <style>
      button {
          height: 20px;
          font-size: 10px;
          border: 0 solid transparent;
          background-color: lightgrey;
          border-radius: 5px;
      }

      button:active {
          border: 0 solid transparent;
          background-color: #6b7a98;
      }

      input[type] {
          display: block;
      }

      input[type^='text'] {
          border: 2px solid greenyellow;
          background-color: #bfa;
      }

      input[type$='word'] {
          background-color: red;
      }

      /*属性匹配*/
      /*input[type*=er] {*/
      /*    height: 100px;*/
      /*}*/
  </style>
</head>
<body>
<button>上一页</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>下一页</button>
<br>
<br>
<br>
<form action="#" method="post">
  <fieldset>
    <legend>注册表单</legend>
    <label for="username">
      <input type="text" name="username" id="username"/>
    </label>
    <label for="password">
      <input type="password" name="password" id="password"/>
    </label>
  </fieldset>
</form>
</body>
</html>